import React, { useEffect, useState, Key } from "react";
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";


import {
  getHospitalDepartmentRequest,     //请求科室数据Api
  getScheduleRuleRequest,           //某个科室排班规则请求
  findScheduleListRequest,          //请求科室时间详细信息
} from "@api/hospital/hospitalList"


import type {
  getHosDepartmentReqType,    //请求科室数据返回值类型
  bookingScheduleListType,    //某个科室排班规则请求返回值中数组的类型    
  findScheduleListReturn,     //科室时间详细信息返回值类型 
} from "@api/hospital/model/hospitalListTypes"


export default function HospitalSchedule() {
  //编程式路由导航
  const navigate = useNavigate()
  //拿到医院列表传过来的hoscode
  const { hoscode } = useParams()

  //分页器
  const [total, setTotal] = useState(0)


  //保存科室数据渲染到树里面
  const [sectionData, setSectionData] = useState<getHosDepartmentReqType>([])
  //保存某个科室排班规则数据中数组的值 渲染到Tag里面
  const [schduleRule, setSchduleRule] = useState<bookingScheduleListType>([])
  //保存科室时间详细信息 渲染到表格
  const [schduleList, setSchduleList] = useState<findScheduleListReturn>([])


  //1.请求医院科室列表的函数
  const getHosDepartment = async () => {
    const result = await getHospitalDepartmentRequest(hoscode as string)

    //把请求回来的科室列表数据保存在状态中
    setSectionData(result)

    //返回result 给第二个请求传递参数用
    return result
  }

  //2.请求排班规则的函数
  const getHosScheduleRule = async (initDepcode: string) => {
    const result = await getScheduleRuleRequest({
      page: 1,
      limit: 10,
      hoscode: hoscode as string,
      depcode: initDepcode
    })

    //把请求回来的排班规则数据保存在状态中
    setSchduleRule(result.bookingScheduleList)

    //把排班规则数据总数保存在状态
    setTotal(result.total)

    //返回result 给第三个请求传递参数用
    return result.bookingScheduleList

  }

  //3.请求排班日期详细数据
  const getHosScheduleMessage = async (depcode: string, workDate: string) => {
    const result = await findScheduleListRequest({
      hoscode: hoscode as string,
      depcode: depcode,
      workDate: workDate,
    })

    //把请求回来的排班规则数据保存在状态中
    setSchduleList(result)
  }


  //初始化的时候按顺序依次发送3个请求
  useEffect(() => {
    (async () => {
      //1.请求所有科室数据
      const department = await getHosDepartment();
      //2.根据科室数据获取初始的科室信息
      const initDepcode = (department[0].children as getHosDepartmentReqType)[0].depcode
      //3.把初始的科室信息传递给 请求排班列表函数 得到排班列表数据
      const scheduleRule = await getHosScheduleRule(initDepcode)
      //4.根据排班列表数据获取初始的日期信息
      const initWorkDate = scheduleRule[0].workDate
      //5.把初始日期信息传递给 请求排班日期信息函数 得到详细日期数据
      await getHosScheduleMessage(initDepcode, initWorkDate);
    })()
  }, [])










  //树形样式
  const treeStyle = {
    height: "500px",   //固定高度
    overflow: "auto",  //内容超出生成滚动条
    border: "1px solid #000", //边框
  }
  // 表格列的描述
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];



  //1.展示总数据的回调函数
  const showTotalHandle = (total: number) => {
    return <span>{`总数据有${total}条`}</span>
  }

  // //2.改变页码的回调函数
  // const changePageHandle = (current: number, pageSize: number) => {
  //   //切换页码改变状态重新渲染
  //   setCurrent(current)
  //   setPagesize(pageSize)
  // }

  // //3.点击树的回调函数
  // const clickTreeHandle = (depcode:Key[]) => {
  //   //数组中第一项就是当前点击的数节点的depcode
  //   //点击树改变科室
  //   setDepCode(depcode[0] as string)
  // }

  // //4.点击Tag的回调函数
  // const changeborderhandle = (workdate:string) => {
  //   return () => {
  //     //点击Tag改变workDate
  //     setWorkDate(workdate)
  //   }
  // }


  return (
    <Card>
      <p>选择：北京协和医院 / 多发性硬化专科门诊 / 2022-04-28</p>

      {/* 一行两列 列与列的间距20  */}
      <Row gutter={20}>

        {/* 左 */}
        <Col span={5}>
          <div>
            <Tree
              style={treeStyle}
              treeData={sectionData as []}   //树的数据用请求回来的数据
              fieldNames={{ title: "depname", key: "depcode" }}   //数据的配置
              expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]} //默认展开专科
            //点击数节点函数 参数1: depcode组成的数组
            // onSelect = {clickTreeHandle} 
            />
          </div>
        </Col>


        {/* 右 */}
        <Col span={19}>
          <div style={{ marginBottom: 20, cursor: "pointer" }}>
            {
              schduleRule.map((item) => {
                return (
                  <Tag
                    key={item.workDate}
                  //点击Tag把当前的workDate传递到函数 
                  // onClick = {changeborderhandle(item.workDate)}
                  >
                    <p>{item.workDate}</p>
                    <p>
                      {item.availableNumber}/{item.reservedNumber}
                    </p>
                  </Tag>
                )
              })
            }
          </div>


          {/* 分页器 */}
          <Pagination
            pageSizeOptions={[1, 5, 10, 15, 20, 30, 40]}
            current={1}
            pageSize={10}
            total={total}
            //展示切换页码
            showSizeChanger

            //展示数据总数
            showTotal={showTotalHandle}

          //改变页码的回调
          // onChange={changePageHandle}

          />

          {/* 表格 */}
          <Table
            style={{ marginTop: 20 }}
            columns={columns}
            dataSource={schduleList}
            bordered
            rowKey="id"
            pagination={false}
          />

          <Button style={{ marginTop: 20 }} onClick={() => navigate(-1)}>返回</Button>
        </Col>

      </Row>
    </Card>
  );
}
